<template>
    <el-cascader v-model="slval" :options="options" :props="defaultProps" placeholder="选择区域" :disabled='disabled' @change="handleChange" :style="{width}"/>
</template>

<script setup>
import {ref,reactive,onMounted,watch} from "vue"
import areaLists from '@/api/area'
import {getTenArea} from '@/api/plant'
//console.log("areaLists:",areaLists)

const props = defineProps({
    modelValue:'',
    disabled:{
        type: Boolean,
        default(){
            return false  // 默认
        }
    },
    width:{
        type:String,
        default:'100%'
    }
})
const emit = defineEmits(['change','update:modelValue'])

const slval = ref('')
const options = ref([])
const defaultProps = reactive({
    children: 'sub',
    label: 'name',
    value:'name' 
   // children: 'children',
   // label: 'fullname',
   // value:'fullname' 
})
const province_list = ref([])// 所有省份
const city_list = ref([])// 所有城市（不分省份）
const area_list = ref([])// 所有区域（不分省份、城市）

watch(()=>props.modelValue,(n,o)=>{
    slval.value = n
})

onMounted(()=>{
    // getTenArea().then(res=>{
    //     province_list.value = res.data.result[0] // 所有省份
    //     city_list.value  = res.data.result[1] // 所有城市（不分省份）
    //     area_list.value  = res.data.result[2] // 所有区域（不分省份、城市）
    //     //options.value = res.data.result[0]
    //     province_list.value.forEach(item => {
    //         let cur_province = item // 当前省份
    //         const start = cur_province.cidx[0] // 当前省份对应的城市在city_list数组中的开始下标
    //         const end = cur_province.cidx[1] // 当前省份对应的城市在city_list数组中的介绍下标
  
    //         // 把查找到当前省份所有城市放到当前省份下的children中
    //         cur_province.children = getDataForArr(city_list.value,start,end)
    //         options.value.push(cur_province)  
    //     });
    // })
    
    options.value = areaLists
})

const getDataForArr = (arr,start,end)=>{
    let tmArr = []
    for(let i=start;i<=end;i++){
        let cityitem = arr[i]
        if(cityitem.cidx){
            const start2 = cityitem.cidx[0] 
            const end2= cityitem.cidx[1]
            cityitem.children= getDataForArr(area_list.value,start2,end2)
        }
        tmArr.push(cityitem)
    }
    return tmArr
}

const handleChange = (value) => {
  //console.log(value)
  emit('update:modelValue',value) 
  if(value && value.length>0){
    emit('change',{province:value[0],city:value[1],area:value[2]})
  }else{
    emit('change','')
  }
}


</script>